<template>
  <el-form ref="form"
           :model="dataForm[scriptItem.text]"
           label-position='right'
           label-width="100px">
    <el-form-item label="url:"
                  style="display: flex;align-items: center;margin-bottom:10px;font-weight: bold;">
      <el-input v-model="dataForm[scriptItem.text].url"></el-input>
    </el-form-item>
    <el-form-item label="integration:"
                  style="display: flex;align-items: center;margin-bottom:10px;font-weight: bold;">
      <el-select v-model="dataForm[scriptItem.text].configCode"
                 filterable>
        <el-option v-for="item in integrationList"
                   :key="item.dictValue"
                   :label="item.dictValue"
                   :value="item.subjectCode"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="method:"
                  style="display: flex;align-items: center;margin-bottom:10px;font-weight: bold;">
      <el-select v-model="dataForm[scriptItem.text].method">
        <el-option v-for="item in methodList"
                   :key="item"
                   :label="item"
                   :value="item"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="headers:"
                  style="font-weight: bold;margin-bottom: 10px;">
      <el-table :data="dataForm[scriptItem.text].headerValue"
                v-if="Array.isArray(dataForm[scriptItem.text].headerValue)"
                style="width: 100%">
        <el-table-column label="key"
                         prop="key">
          <template slot-scope="scope">
            <el-input v-model="scope.row.key"
                      size="mini"></el-input>
          </template>

        </el-table-column>
        <el-table-column label="value"
                         prop="value">
          <template slot-scope="scope">
            <el-input v-model="scope.row.value"
                      size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="right">
          <template slot="header">
            <el-button size="mini"
                       type="primary"
                       @click="handleAdd('headerValue')">Add</el-button>
          </template>
          <template slot-scope="scope">
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index,'headerValue')">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item label="params:"
                  style="display: flex;align-items: center;margin-bottom:10px;font-weight: bold;">
      <el-tabs v-model="activeName"
               type="card">
        <el-tab-pane label="query"
                     name="query">
          <el-table :data="dataForm[scriptItem.text].queryValue"
                    v-if="Array.isArray(dataForm[scriptItem.text].queryValue)"
                    style="width: 100%">
            <el-table-column label="key"
                             prop="key">
              <template slot-scope="scope">
                <el-input v-model="scope.row.key"
                          size="mini"></el-input>
              </template>

            </el-table-column>
            <el-table-column label="value"
                             prop="value">
              <template slot-scope="scope">
                <el-input v-model="scope.row.value"
                          size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="right">
              <template slot="header">
                <el-button size="mini"
                           type="primary"
                           @click="handleAdd('queryValue')">Add</el-button>
              </template>
              <template slot-scope="scope">
                <el-button size="mini"
                           type="danger"
                           @click="handleDelete(scope.$index,'queryValue')">Delete</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="body"
                     name="body">
          <el-radio-group v-model="dataForm[scriptItem.text].bodyFormat"
                          @change="bodyFormatChange">
            <el-radio label="none"></el-radio>
            <el-radio label="form-data"></el-radio>
            <el-radio label="x-www-form-urlencoded"></el-radio>
            <el-radio label="json"></el-radio>
            <el-radio label="xml"></el-radio>
            <!-- <el-radio label="raw"></el-radio> -->
          </el-radio-group>
          <el-table :data="dataForm[scriptItem.text].bodyValue"
                    v-if="Array.isArray(dataForm[scriptItem.text].bodyValue)"
                    style="width: 100%">
            <el-table-column label="key"
                             prop="key">
              <template slot-scope="scope">
                <el-input v-model="scope.row.key"
                          size="mini"></el-input>
              </template>

            </el-table-column>
            <el-table-column label="value"
                             prop="value">
              <template slot-scope="scope">
                <el-input v-model="scope.row.value"
                          size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="right">
              <template slot="header">
                <el-button size="mini"
                           type="primary"
                           @click="handleAdd('bodyValue')">Add</el-button>
              </template>
              <template slot-scope="scope">
                <el-button size="mini"
                           type="danger"
                           @click="handleDelete(scope.$index,'bodyValue')">Delete</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-input type="textarea"
                    v-if="!Array.isArray(dataForm[scriptItem.text].bodyValue)"
                    :rows="5"
                    autosize
                    v-model="dataForm[scriptItem.text].bodyValue">
          </el-input>
        </el-tab-pane>
      </el-tabs>
    </el-form-item>
  </el-form>
</template>
<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'
export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
      methodList: ['get', 'post', 'put', 'delete'],
      activeName: 'query',
      integrationList: []
    }
  },
  created () {
    if (this.scriptItem.methodList) {
      this.methodList = [...this.scriptItem.methodList]
    }
    this.integrationList = window.SITE_CONFIG['dictList'] ? window.SITE_CONFIG['dictList'].find(
      e => e.dictType === 'integration_list'
    ).dataList.sort((a, b) => a.dictValue.localeCompare(b.dictValue)) : []
  },
  methods: {
    handleAdd (tabel) {
      this.dataForm[this.scriptItem.text][tabel].push({ key: null, value: null })
    },
    handleDelete (i, tabel) {
      this.dataForm[this.scriptItem.text][tabel].splice(i, 1)
    },
    bodyFormatChange (value) {
      if (['form-data', 'x-www-form-urlencoded'].includes(value)) {
        this.dataForm[this.scriptItem.text].bodyValue = []
      } else {
        this.dataForm[this.scriptItem.text].bodyValue = null
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
